<script setup lang="ts">
import { Formattime } from "@/logics/geshiitem";
import useItem from "@/logics/useItem";
import { useHomeStore } from "@/stores/homeStore";
const { hour, minute, second } = useItem();
//引入路由
const router = useRouter();

//获取首页的store实例
const homeStore = useHomeStore();
homeStore.getCounts();
const { counts } = storeToRefs(homeStore);
//获取收藏列表
homeStore.getpopularActive();
//获取最新修改
homeStore.getchange_dateActive();
//跳转文章详情
function Goto(nid: number) {
  router.push({
    path: `/article/${nid}`,
  });
}
</script>
<template>
  <div class="left">
    <div class="intro">
      <div class="intro_foot">
        <ul class="item">
          <li>
            {{ hour }}
            <p>hours</p>
          </li>
          <li>:</li>
          <li>
            {{ minute }}
            <p>minutes</p>
          </li>
          <li>:</li>
          <li>
            {{ second }}
            <p>seconds</p>
          </li>
        </ul>
        <div class="title">Ranqi Blog</div>
        <p>
          本博主是一个学习全栈的程序员小白。本站是本博主当做毕业设计写的个人博客网站，包含自己所总结的知识，也会分享一些日常心得~
        </p>
        <ul class="tages">
          <li>
            文章
            <p>{{ counts.result.ArticleCount }}</p>
          </li>
          <li>
            标签
            <p>{{ counts.result.tagCount }}</p>
          </li>
          <li>
            回忆录
            <p>{{ counts.result.HistoryTagCount }}</p>
          </li>

          <li>
            导航分类
            <p>{{ counts.result.NavTagCount }}</p>
          </li>
        </ul>
      </div>
    </div>
    <div class="popular">
      <div class="title">最多收藏的文章</div>
      <div class="xiahuanx"></div>
      <ul>
        <div class="loading" v-if="homeStore.popularActive.status == 'loading'">
          <span class="img"></span>
          <span class="text">正在加载...</span>
        </div>
        <li
          @click="Goto(active.nid)"
          v-else
          v-for="active in homeStore.popularActive.result.slice(0, 3)"
        >
          <div class="left">
            <img :src="active.cover" alt="" />
          </div>
          <div class="right">
            <p>{{ active.title }}</p>
            <span>{{ active.collects_count }} collects </span>
          </div>
        </li>
      </ul>
    </div>
    <div class="popular">
      <div class="title">最新修改的文章</div>
      <div class="xiahuanx"></div>
      <ul>
        <div class="loading" v-if="homeStore.popularActive.status == 'loading'">
          <span class="img"></span>
          <span class="text">正在加载...</span>
        </div>
        <li
          @click="Goto(active.nid)"
          v-for="active in homeStore.change_dateActive.result"
        >
          <div class="left">
            <img :src="active.cover" alt="" />
          </div>
          <div class="right">
            <p>{{ active.title }}</p>
            <span>{{ Formattime(active.change_date) }} </span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<style scoped lang="scss">
.left {
  width: 20%;
  margin-left: 3%;
  .intro {
    border-radius: 10px;
    width: 100%;
    background-color: var(--el-bg-color-overlay);
    .item {
      height: 130px;
      font-size: 40px;
      color: var(--el-bg-color);
      display: flex;
      justify-content: space-around;
      background-image: url(https://api.adicw.cn/uploads/StudyImg/6050c8a16e416.jpg);
      background-size: cover;
      border-radius: 10px 10px 0px 0px;
      li {
        margin-top: 20px;
        p {
          font-size: 12px;
          padding-top: 20px;
          text-align: center;
        }
      }
    }
    .intro_foot {
      width: 100%;
      .title {
        font-weight: 700;
        font-size: 17px;
        color: #08d9d6;
        margin: 10px;
      }
      p {
        font-size: 12px;
        margin: 10px;
      }
      .tages {
        display: flex;

        margin-top: 20px;
        border-top: 1px solid var(--el-border-color);
        :not(:last-child) {
          border-right: 1px solid var(--el-border-color);
        }
        li {
          text-align: center;
          font-size: 14px;
          margin-top: 15px;
          color: var(--el-text-color-secondary);
          width: 25%;
          height: 40px;
          margin-bottom: 10px;

          p {
            font-size: 10px;
            text-align: center;
            color: var(--el-text-color-primary);
          }
        }
      }
    }
  }
  .popular {
    ul {
      margin-left: 15px;
      margin-right: 15px;
      padding-top: 15px;
      padding-bottom: 20px;
      border-top: 1px solid var(--el-border-color);
      li:hover img {
        transform: scale(1.1);
      }
      li {
        margin-top: 10px;
        display: flex;
        cursor: pointer;

        .left {
          img {
            width: 50px;
            height: 50px;
            border-radius: 10px;
            transition: all 0.3s;
          }
        }
        .right {
          margin-left: 20px;
          p {
            font-size: 12px;
            color: var(--el-text-color-secondary);
            margin-top: 5px;
            margin-bottom: 10px;
          }
          span {
            font-size: 12px;
            color: var(--el-border-color-darker);
          }
        }
      }
    }
  }
  .loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    .img {
      width: 200px;
      height: 200px;
      background: url(@/assets/img/login.gif) no-repeat center / contain;
    }
    .text {
      display: block;
      color: #999;
      font-size: 16px;
    }
  }
}
</style>
